<template>
	<view class="page__content">
		<!-- 顶部渐变背景 -->
		<!-- <view class="top-bg"></view> -->
		<up-navbar style="z-index: 99999;" :fixed="false" title="个人中心" :autoBack="true" :safeAreaInsetTop="true"
			leftIconColor="#fff" bgColor="rgba(0,0,0,0) !important"></up-navbar>

		<!-- 居中容器，限制宽度以兼容大屏 -->
		<view class="container">
			<view class="card glass">
				<view class="x-c">
					<view class="avatar-wrap">
						<image class="avatar" :src="defaultAvatar" mode="aspectFill" />
					</view>
				</view>

				<view class="user-info">
					<text class="user-name">{{ UserInfo.BusinessName }}</text>
					<view class="meta-row">
						<text class="account">{{ UserInfo.UserCode }}</text>
						<text class="role">{{ UserInfo.UserName }}</text>
					</view>
				</view>

				<!-- 功能宫格 -->
				<view class="grid">
					<view class="grid-item" @click="ToOther({ID:0})">
						<view class="icon-circle">
							<uni-icons fontFamily="CustomFontPlatform" color="#00d302" size="60rpx"
								style="margin-right:6rpx;">{{uni.$utils.toUniCode('&#xe602;')}}</uni-icons>
						</view>

						<text class="item-text">授权</text>
					</view>

					<view class="grid-item" v-for="(item,index) in CellBox" :key="index" @click="ToOther(item)">
						<view class="icon-circle">
							<uni-icons :type="item.Icon" size="60rpx" :color="item.IconColor"></uni-icons>
						</view>
						<text class="item-text">{{item.Text}}</text>
					</view>


					<view class="grid-item logout" @click="onLogout">
						<view class="icon-circle red x-c">
							<uni-icons fontFamily="CustomFontPlatform" color="#df1311"
								size="60rpx">{{uni.$utils.toUniCode('&#xe614;')}}</uni-icons>
						</view>
						<text class="item-text">退出登录</text>
					</view>
				</view>
			</view>
		</view>


		<view class="page__content__bottom y-f">
			<text>浙ICP备2024083567号-5X</text>
			<text>—— ©汇智云创 技术支持 ——</text>
		</view>

		<up-modal :duration="100" :show="showLoginOut" :showConfirmButton="true" :showCancelButton="true" :zoom="true"
			title="退出登录" width="400rpx" confirmText="退出" confirmColor="#df1311" content='是否要退出当前登录？'
			@confirm="SubmitLoginOut" @cancel="CloseLoginOut">
		</up-modal>
	</view>
</template>

<script setup lang="ts">
	import { reactive, computed, onMounted, ref } from 'vue'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { useMainStore, useUserStore } from '@/store';
	const mainStore = useMainStore();
	const userStore = useUserStore();
	import useRequestQueue from '@/uni_modules/mc-ui/libs/http/UniversalRequestQueue';
	const { request, requestByUrl, onAllComplete, onError } = useRequestQueue();


	let UserInfo = userStore.UserInfo;

	const defaultAvatar = uni.$utils.getResourceUrl('image/Img/default.png')


	let CellBox = ref<any[]>([{
		Text: '关于',
		Icon: 'info',
		IconColor: '#e6da2b',
		ID: 1
	},
	{
		Text: '设置',
		Icon: 'gear',
		IconColor: '#b6b6b6',
		ID: 2
	}]);

	onMounted(() => {

	})



	function ToOther(data : any) {
		let url = ''

		if (data.ID == 0) {
			url = '/st_pages/mine/setting/onlyIdentity'
		} else if (data.ID == 1) {
			return uni.$utils.layer.alert("功能暂未开放！");
			url = '/st_pages/mine/MineAbout'
		} else if (data.ID == 2) {
			url = '/st_pages/mine/setting/settingPage'
		}

		if (url) {
			uni.navigateTo({
				url: url,
				fail(error) {
					console.log(error)
				}
			})
		}
	}

	// 是否展示注销登录窗口
	let showLoginOut = ref(false);
	function onLogout() {
		showLoginOut.value = true;
	}
	function CloseLoginOut() {
		showLoginOut.value = false;
	};
	function SubmitLoginOut() {
		// 清除一些需要重置的缓存
		mainStore.systemConfig.isLogin = false;

		// 清除自动登录
		uni.removeStorageSync('Automatic_Login')
		uni.reLaunch({
			url: '/pages/login/login',
		});
	}
</script>

<style lang="scss" scoped>
	.page__content {
		position: relative;
		height: 100%;
		// min-height: 100vh;
		// background: linear-gradient(180deg, #51d0d0 0%, #7be1e1 30%, #cfe9e8 60%, #ffffff 100%);
		display: flex;
		flex-direction: column;
		// justify-content: space-between;
		// background: linear-gradient(135deg, #51d0d0, #8ce6e6);
		// height: 30vh;
		// border-bottom-left-radius: 40rpx;
		// border-bottom-right-radius: 40rpx;
		height: 40vh;
		background: linear-gradient(180deg, #51d0d0, #cafbff, rgba(211, 251, 255, 0.5), rgba(211, 251, 255, 0.2));
		border-bottom-left-radius: 40rpx;
		border-bottom-right-radius: 40rpx;
		// overflow: hidden;

		&__bottom {
			position: fixed;
			bottom: 10rpx;
			font-size: 12px;
			color: #a6a6a6;
			border-top: none;
		}

		&::after {
			content: '';
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 100%;
			background: linear-gradient(to bottom, transparent 60%, rgba(255, 255, 255, 0.3) 100%);
		}
	}

	/* 顶部只是视觉填充，实际内容在 container 内 */
	// .top-bg {
	// 	height: 220rpx;
	// }

	.container {
		// flex: 1;
		width: 100%;
		display: flex;
		justify-content: center;
		/* 限制最大宽度，兼容超宽设备 */
		padding: 40rpx 24rpx 0;
	}

	.card {
		width: 100%;
		max-width: 680rpx;
		/* 在大屏上居中并限制宽度 */
		// margin-top: -120rpx;
		// margin-top: 40rpx;
		/* 浮卡效果 */
		border-radius: 28rpx;
		padding: 40rpx 30rpx 60rpx;
		box-sizing: border-box;
	}

	/* 毛玻璃效果 */
	.glass {
		background: rgba(255, 255, 255, 0.16);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		border: 1rpx solid rgba(255, 255, 255, 0.12);
		// box-shadow: 0 20rpx 40rpx rgba(15, 40, 40, 0.12);
		box-shadow: 0 5rpx 25rpx -8rpx rgba(15, 40, 40, 0.12);
	}

	.avatar-wrap {
		display: flex;
		justify-content: center;
		margin-top: 10rpx;
		background: rgba(0, 0, 0, 0.05);
		backdrop-filter: blur(4px);
		-webkit-backdrop-filter: blur(4px);
		width: fit-content;
		border-radius: 50%;
	}

	.avatar {
		width: 160rpx;
		height: 160rpx;
		border-radius: 80rpx;
		border: 4rpx solid rgba(255, 255, 255, 0.14);
		background: rgba(255, 255, 255, 0.06);
	}

	.user-info {
		text-align: center;
		margin-top: 20rpx;
	}

	.user-name {
		display: block;
		font-size: 36rpx;
		font-weight: 700;
		color: #0b2b2b;
	}

	.meta-row {
		display: flex;
		justify-content: center;
		gap: 12rpx;
		margin-top: 8rpx;
		align-items: center;
	}

	.account {
		color: rgba(11, 43, 43, 0.7);
		font-size: 26rpx;
	}

	.role {
		background: #51d0d0;
		color: #fff;
		padding: 6rpx 14rpx;
		border-radius: 20rpx;
		font-size: 22rpx;
	}

	/* 宫格 */
	.grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 22rpx;
		margin-top: 36rpx;
	}

	.grid-item {
		// background: rgba(255, 255, 255, 0.9);
		background: rgba(255, 255, 255, 0.15);
		backdrop-filter: blur(12px);
		border-radius: 20rpx;
		padding: 30rpx 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		min-height: 160rpx;
		box-shadow: 0 8rpx 20rpx rgba(2, 8, 8, 0.06);
	}

	.icon-circle {
		width: 70rpx;
		height: 70rpx;
		border-radius: 35rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 34rpx;
		color: #fff;
		margin-bottom: 18rpx;
	}

	.icon-circle.green {
		background: #2ecc71;
	}

	.icon-circle.blue {
		background: #3498db;
	}

	.icon-circle.gray {
		background: #95a5a6;
	}

	.icon-circle.red {
		background: #fff;
		color: #ff0265;
	}

	.item-text {
		font-size: 28rpx;
		color: #153737;
	}

	/* 退出按钮强调 */
	.grid-item.logout {
		background: linear-gradient(180deg, rgb(251 49 49 / 75%), rgb(255 65 65 / 66%));

	}

	.grid-item.logout .item-text {
		color: #fff;
	}



	/* 兼容性小优化 */
	@media (min-width: 700px) {
		.card {
			padding: 48rpx;
		}

		.avatar {
			width: 200rpx;
			height: 200rpx;
			border-radius: 100rpx;
		}
	}
</style>